<template>
    <h3 style="text-align: :center;">用户投资项目列表</h3>

    投资名称:<input type="text" v-model="investName" placeholder="请输入投资名称">
    投资金额:<input type="text" v-model="investMoney" placeholder="请输入投资金额">
    <button @click="LoadData">查询</button>

    <table class="table table-striped table-bordered" border="1">
        <thead>
            <tr style="background-color:aqua;">
                <td>投资编号</td>
                <td>投资名称</td>
                <td>投资总额度</td>
                <td>已投资金额</td>
                <td>剩余金额</td>
                <td>投资人数</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.I_Id">
                <td>{{ item.I_Id }}</td>
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_Budget.toFixed(2) }}CNY</td>
                <td>{{ item.I_Receive.toFixed(2) }}CNY</td>
                <td>{{ item.I_Residue.toFixed(2) }}CNY</td>
                <td>{{ item.I_Number }}</td>
                <td>
                    <a href="#" @click="TakeUserInvestInfo(item.I_Id)">投资</a>
                </td>
            </tr>
        </tbody>
    </table>
    <span>
        当前共{{ page.totalCount }}条,每页{{ page.pageSize }},当前第{{ page.pageIndex }}/{{ page.pageCount }}页
        <a href="#" @click="PageShow('F')" style="padding-right: :10px;">首页</a>
        <a href="#" @click="PageShow('U')" style="padding-right: :10px;">上一页</a>
        <a href="#" @click="PageShow('N')" style="padding-right: :10px;">下一页</a>
        <a href="#" @click="PageShow('E')" style="padding-right: :10px;">尾页</a>
        <select v-model="CSize" @change="ChangeSize">
            <option value="1">1条/页</option>
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
        </select>
        <input type="text" v-model="CNumber" style="width: :50px;" placeholder="输入页码">
        <button @click="TakeInfo">跳转</button>
    </span>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import axios from 'axios';
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const data = ref([{
    I_Id: 0,
    I_Name: '',
    I_Budget: 0,
    I_Receive: 0,
    I_Residue: 0,
    I_Number: 0,
}]);

//声明分页参数的
const page = ref(
    {
        pageIndex: 1,
        pageSize: 2,
        totalCount: 0,
        pageCount: 0
    }
)

//生命周期钩子
onMounted(() => {
    LoadData();
})


const investName = ref('')
const investMoney = ref('')

//显示，查询方法
const LoadData = () => {
    axios.get('https://localhost:44305/api/Invests/ShowInvestInfo',
        {
            params: {
                Iname: investName.value,
                Imoney: investMoney.value,
                pageIndex: page.value.pageIndex,
                pageSize: page.value.pageSize
            }
        })
        .then(res => {
            console.log(res.data);
            data.value = res.data.list;
            //将数据总数、总页数赋值
            page.value.totalCount = res.data.totalCount;
            page.value.pageCount = res.data.pageCount;
        })
        .catch(error => {
            console.log(error);
        })
}

//分页方法
const PageShow = (msg: string) => {
    switch (msg) {
        case 'F':
            page.value.pageIndex = 1;
            break;
        case 'U':
            if ((page.value.pageIndex - 1) < 1) {
                alert('索引起始值从1开始');
                page.value.pageIndex = 1;
                return;
            }
            page.value.pageIndex = page.value.pageIndex - 1;
            break;
        case 'N':
            if ((page.value.pageIndex + 1) > page.value.pageCount) {
                alert('页码不能超过最大页码');
                page.value.pageIndex = page.value.pageCount;
                return;
            }
            page.value.pageIndex = page.value.pageIndex + 1;
            break;
        case 'E':
            page.value.pageIndex = page.value.pageCount;
            break;
    }
    LoadData();
}

//设置页容量
const CSize = ref(2);
const ChangeSize = () => {
    page.value.pageSize = CSize.value;
    LoadData();
}

//跳转指定页
const CNumber = ref();
const TakeInfo = () => {
    page.value.pageIndex = CNumber.value;
    if (page.value.pageIndex < 1) {
        alert('当前起始页为1');
        page.value.pageIndex = 1;
        LoadData();
        return;
    }
    LoadData();
}


//修改通过路由跳转页面
const router = useRouter();
const TakeUserInvestInfo = (I_Id: number) => {
    router.push({
        name: "UserInvestInfo",
        params: {
            Iid: I_Id,
        }
    })
}

</script>